<template>
  <div class="custom-tree-container">
    <el-tree 
    style="max-width: 600px"
    ref="treeRef"
    :data="dataSource" 
    node-key="id" 
    default-expand-all 
    :expand-on-click-node="false">
      <template #default="{ node, data }">
        <span class="custom-tree-node">
          <div>
            <span>{{ data.label }}</span>
            <el-input v-if="data.istrue == true" v-model="data.weight" size="small"
              style="width:100px;margin-left:10px;" @blur="jyshifou(node,data)"/>
          </div>
          <div>
            <span>
              <a @click="append(data)"> 添加 </a>
              <a @click="xiugai(data)"> 修改 </a>
              <a v-if="node.level == 3" @click="weight11(data)"> 权重配置 </a>
              <a style="margin-left: 8px" @click="remove(node, data)"> 删除 </a>
            </span>
          </div>
        </span>
      </template>
    </el-tree>
  </div>
  <div>
    <el-button type="primary" @click="save" >确定</el-button>
  </div>
</template>

<script lang="ts" setup>
import { ref, } from 'vue'
import type Node from 'element-plus/es/components/tree/src/model/node'

interface Tree {
  id: number
  label: string
  children?: Tree[]
  weight?: any
  istrue?: any
}
let id = 1000
// 添加
const append = (data: Tree) => {
  console.log(data, '添加')
  const newChild = { id: id++, label: 'testtest', children: [] }
  if (!data.children) {
    data.children = []
  }
  data.children.push(newChild)
  console.log(dataSource.value, 'dataSource')
  dataSource.value = [...dataSource.value]
  console.log(dataSource.value, 'last')
}
// 删除
const remove = (node: Node, data: Tree) => {
  const parent = node.parent
  const children: Tree[] = parent.data.children || parent.data
  const index = children.findIndex((d) => d.id === data.id)
  children.splice(index, 1)

  dataSource.value = [...dataSource.value]
}
// 配置
const weight11 = ( data: Tree) => {
  qz(dataSource.value, data.id)
  // dataSource.value = [...dataSource.value]
  // console.log(dataSource.value,'last' )
}
const treeRef = ref()
//修改
const xiugai = (data: Tree) => {
  const node = treeRef.value.getNode(data.id)
  if(node){
    node.data.label = 'zhang'
  }
}
const save = () =>{
  console.log(dataSource.value,'dataSource.value')
}
//校验
const jyshifou = (node: Node,data: Tree)=>{
  const parent = node.parent
  console.log(parent.data.children, 'weigh11')
  if(parent.data.children){
    let sum = 0
    parent.data.children.map((item:any) => {
     sum +=  parseFloat(item.weight)
     console.log(sum,'sum')
     if( sum>1 ){
      alert("总和不能大于1")
      const node = treeRef.value.getNode(data.id)
      if(node){
        node.data.weight = ''
      }
     }
    })
  }
}
// const updatexigai = (nodes: any, id: any, updateName: string) => {
//   nodes.forEach((node: any) => {
//     // console.log(node, id)
//     if (!node.children || node.children.length === 0) {
//       if (node.id === id) {
//         node.label = updateName;
//       }
//     } else {
//       updatexigai(node.children, id, updateName)
//     }
//   })

// }
const qz = (nodes: any, id: any) => {
  nodes.forEach((node: any) => {
    // console.log(node, id)
    if (!node.children || node.children.length === 0) {
      if (node.id === id) {
        node.istrue = true;
      }
    } else {
      qz(node.children, id)
    }
  })

}
const dataSource = ref<Tree[]>([
  {
    id: 1,
    label: 'Level one 1',
    children: [
      {
        id: 4,
        label: 'Level two 1-1',
        children: [
          {
            id: 9,
            label: 'Level three 1-1-1',
          },
          {
            id: 10,
            label: 'Level three 1-1-2',
          },
        ],
      },
    ],
  },
  {
    id: 2,
    label: 'Level one 2',
    children: [
      {
        id: 5,
        label: 'Level two 2-1',
      },
      {
        id: 6,
        label: 'Level two 2-2',
      },
    ],
  },
  {
    id: 3,
    label: 'Level one 3',
    children: [
      {
        id: 7,
        label: 'Level two 3-1',
      },
      {
        id: 8,
        label: 'Level two 3-2',
      },
    ],
  },
])
// onMounted(()=>{

// })
const addLevelToTreeData = (nodes: any, level = 1) => {
  nodes.forEach((node: any) => {
    node.level = level;
    node.istrue = false;
    node.weight = "";
    if (node.children && node.children.length > 0) {
      addLevelToTreeData(node.children, level + 1);
    }
  });
}
addLevelToTreeData(dataSource.value)
console.log(dataSource.value, 'dataSource.value')
</script>

<style>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>